<!DOCTYPE html>
<html>
	<head>
		<title>消息列表</title>
		
		
<!-------------------- 公共头部 --------------------------->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		
		<link rel="stylesheet" type="text/css" href="../static/css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/mui.previewimage.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/css.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/swiper.min.css"/>
		<script type="text/javascript" src="../static/js/swiper.min.js"></script>
		<script type="text/javascript" src="../static/js/mui.min.js"></script>
		<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="../static/js/localImg.js"></script>
		<script type="text/javascript" src="../static/js/mobileImg.js"></script>
		<script type="text/javascript" src="../static/js/mui.zoom.js"></script>
		<script type="text/javascript" src="../static/js/mui.previewimage.js"></script>
<!-- 		<script type="text/javascript" src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
		
		<style type="text/css">
			.divHeight {
			    width: 100%;
			    height: 5px;
			    background: #f5f5f5;
			    position: relative;
			    overflow: hidden;
			}
			
			.mui-show-loading {  
			    position: fixed;  
			    padding: 5px;  
			    width: 120px;  
			    min-height: 120px;  
			    top: 45%;  
			    left: 50%;  
			    margin-left: -60px;  
			    background: rgba(0, 0, 0, 0.6);  
			    text-align: center;  
			    border-radius: 5px;  
			    color: #FFFFFF;  
			    visibility: hidden;  
			    margin: 0;  
			    z-index: 2000;  
			
			    -webkit-transition-duration: .2s;  
			    transition-duration: .2s;  
			    opacity: 0;  
			    -webkit-transform: scale(0.9) translate(-50%, -50%);  
			    transform: scale(0.9) translate(-50%, -50%);  
			    -webkit-transform-origin: 0 0;  
			    transform-origin: 0 0;  
			}  
			.mui-show-loading.loading-visible {  
			    opacity: 1;  
			    visibility: visible;  
			    -webkit-transform: scale(1) translate(-50%, -50%);  
			    transform: scale(1) translate(-50%, -50%);  
			}  
			.mui-show-loading .mui-spinner{  
			    margin-top: 24px;  
			    width: 36px;  
			    height: 36px;  
			}  
			.mui-show-loading .text {  
			    line-height: 1.6;  
			    font-family: -apple-system-font,"Helvetica Neue",sans-serif;  
			    font-size: 14px;  
			    margin: 10px 0 0;  
			    color: #fff;  
			}  
			
			.mui-show-loading-mask {  
			  position: fixed;  
			  z-index: 1000;  
			  top: 0;  
			  right: 0;  
			  left: 0;  
			  bottom: 0;  
			}  
			.mui-show-loading-mask-hidden{  
			    display: none !important;  
			}
			
			.list-nothing {
			    width: 100%;
			    height: 4rem;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
			    justify-content: center;
			    line-height: 1.01;
			}
			.list-nothing__icon {
			    background: url(../static/img/bg_nothing.png) no-repeat 0 0;
			    background-size: contain;
			    width: 2rem;
			    height: 2rem;
			}
			.list-nothing__text {
			    margin-top: 0.4rem;
			    font-size: 0.2rem;
			    color: #151617;
			}
		</style>
		
		<script type="text/javascript">
			//扩展mui.showLoading  
			(function($, window) {  
			    //显示加载框  
			    $.showLoading = function(message,type) {  
			        if ($.os.plus && type !== 'div') {  
			            $.plusReady(function() {  
			                plus.nativeUI.showWaiting(message);  
			            });  
			        } else {  
			            var html = '';  
			            html += '<i class="mui-spinner mui-spinner-white"></i>';  
			            html += '<p class="text">' + (message || "数据加载中") + '</p>';  
		
			            //遮罩层  
			            var mask=document.getElementsByClassName("mui-show-loading-mask");  
			            if(mask.length==0){  
			                mask = document.createElement('div');  
			                mask.classList.add("mui-show-loading-mask");  
			                document.body.appendChild(mask);  
			                mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});  
			            }else{  
			                mask[0].classList.remove("mui-show-loading-mask-hidden");  
			            }  
			            //加载框  
			            var toast=document.getElementsByClassName("mui-show-loading");  
			            if(toast.length==0){  
			                toast = document.createElement('div');  
			                toast.classList.add("mui-show-loading");  
			                toast.classList.add('loading-visible');  
			                document.body.appendChild(toast);  
			                toast.innerHTML = html;  
			                toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});  
			            }else{  
			                toast[0].innerHTML = html;  
			                toast[0].classList.add("loading-visible");  
			            }  
			        }     
			    };  
		
			    //隐藏加载框  
			      $.hideLoading = function(callback) {  
			        if ($.os.plus) {  
			            $.plusReady(function() {  
			                plus.nativeUI.closeWaiting();  
			            });  
			        }   
			        var mask=document.getElementsByClassName("mui-show-loading-mask");  
			        var toast=document.getElementsByClassName("mui-show-loading");  
			        if(mask.length>0){  
			            mask[0].classList.add("mui-show-loading-mask-hidden");  
			        }  
			        if(toast.length>0){  
			            toast[0].classList.remove("loading-visible");  
			            callback && callback();  
			        }  
			      }  
			})(mui, window);
		</script>
<!-------------------- 公共头部 --------------------------->
		
		
		
		<link rel="stylesheet" type="text/css" href="../static/css/translateelement.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/message.css"/>
		<link type="text/css" href="../static/css/dialog.css" rel="stylesheet">
		<script type="text/javascript" src="../static/js/mDialogMin.js"></script>
		
	</head>
	<body >
		<div class="mui-content">
		
			<ul class="mui-table-view" id="chatlist">
				
				<div class="divHeight"></div>
				<li class="mui-table-view-cell mui-media" style="padding: 1px;background-color: #f5f5f5;max-height: 87px">
					<a style="margin:0px" href="./pain.html">
						<img alt="" style="width: 100%" src="../static/img/pd-001.png" >
					</a>
				</li>	
				<div class="divHeight"></div>
				<div class="divHeight"></div>
					
				<li class="mui-table-view-cell mui-media" >
					<a  href="./trace.html" >
						<img class="mui-media-object mui-pull-left" src="../static/img/pd-001.png">
						<div class="mui-media-body">
							互动消息
							<span class="time">10-10 11:00</span>
							<p class="mui-ellipsis">TA_查看你的空间</p>
						</div>
<!-- 						<span class="mui-badge mui-badge-danger"></span> -->
					</a>
				</li>	
				
				<div class="divHeight" ></div>
				<div class="divHeight" ></div>
				
				<span id="message" >
					<li class="mui-table-view-cell mui-media">
						<div onclick="mui.openWindow({url:'chat.html'})">
							<img class="mui-media-object mui-pull-left" style="border: 1px solid " src="../static/images/100.jpg">
							<div class="mui-media-body">
								小宝同学
								<span class="time" id="me_time">11-04 10:00</span>
								<p class="mui-ellipsis" id="me_text">在？</p>
							</div>
							<span class="mui-badge mui-badge-danger" id="me_read" style="position: absolute;right: 0.38rem;top: 50% !important;"  >2</span>
						</div>
					</li>
					<div class="divHeight"></div>
				</span>
			</ul>
		</div>
		
		<footer>
			<li onclick=mui.openWindow('message.html')><span>
				<img src="../static/img/tabs/info.1.svg" ></span><span style="color:#01CAFD">消息</span>
			</li>
			<li onclick=mui.openWindow('friends.html')>
				<span><img src="../static/img/tabs/friend.svg" ></span><span>TA</span>
			</li>
			<li onclick=mui.openWindow('share.html')>
				<span><img src="../static/img/tabs/find.svg" ></span><span >日记</span>
			</li>
			<li onclick=mui.openWindow('home.html')>
				<span><img src="../static/img/tabs/min.svg" ></span><span>我的</span>
			</li>
		</footer>
		
	</body>
	
<script type="text/javascript">

function closeDialog(h){
	var j;
	var k=document.querySelectorAll('.c_alert_dialog');
	[].forEach.call(k,function(l) {
	(l.dataset.index==h||l===h.parentNode)&&(l.classList.remove('dialog_open'),l.classList.add('dialog_close'),j&&j.call(l.querySelector('.c_alert_wrap'),h),l.querySelector('.c_alert_wrap').addEventListener('animationend',function() {
	l.remove()
	}
	))})
}


function saveChat(h,text){
	if(!(/[\u4e00-\u9fa5]{4,}/.test(text))){
		mui.toast('请输入4字以上的中文话句喔',{ duration:'10', type:'div' });
		return;
	}
	$.ajax({
		url: '[[${sysUrl}]]/wensay/chat/save',
		type: "post",
		data:{
			'type':"1",
			'text': text
		},
		dataType: "json",
		success:function(data){
			if(data.meta.success){
				closeDialog(h);
				mui.toast('发送成功',{ duration:'10', type:'div' });
        		window.location.href = "[[${sysUrl}]]/wensay/message.html";
			}else{
				mui.toast('系统异常...',{ duration:'10', type:'div' });
			}
		}
	});
}
function saveShare(h,text){
	if(!(/[\u4e00-\u9fa5]{4,}/.test(text))){
		mui.toast('请输入4字以上的中文话句喔',{ duration:'10', type:'div' });
		return;
	}
    $.ajax({
        type: "POST",
        url: '[[${sysUrl}]]/wensay/share/save',
        data: {
			"text":text,
			"imgs":""
        },
        dataType:"json",
        success: function(data){
        	if(data.meta.success){
        		closeDialog(h);
        		mui.toast('发布成功!',{ duration:'10', type:'div' });
        		window.location.href = "[[${sysUrl}]]/wensay/share.html";
            }else{
        	   mui.toast('系统异常...',{ duration:'10', type:'div' });
            }
         },
         complete :function(XMLHttpRequest, textStatus){
        	
         },
         error:function(XMLHttpRequest, textStatus, errorThrown){ 
        	 mui.toast('系统异常...',{ duration:'10', type:'div' });
         }
     }); 		
}
</script>
	
<script type="text/javascript">
	var sysUrl="[[${sysUrl}]]";
	var interval=null;
	$(function(){
		if(interval==null){
			interval=setInterval(function(){
				pageInterval(false);
			}, 1000);
		}
	})

	function pageInterval(isView){
		$.ajax({
			url: '[[${sysUrl}]]/wensay/message/interval/page',
			type: "post",
			data:{
			},
			dataType: "json",
			success:function(data){
				if(data.meta.success){
					var content=data.data;
					var html=[];
					for (var i = 0; i < content.length; i++) {
						$("#me_time").html(content[i].time);
						$("#me_text").html(content[i].text);
						if(content[i].un_read>0){
							$("#me_read").html(content[i].un_read);
							$("#me_read").show();
						}else{
							$("#me_read").html(content[i].un_read);		
							$("#me_read").hide();
						}
					}
				}else{
					mui.toast('系统异常...',{ duration:'10', type:'div' });
				}
			}
		});
	}
	
</script>
	
</html>